<template>
  <div class="flex-center">
    <el-color-picker v-if="!useGradient" v-model="computedValue" :show-alpha="true" color-format="rgb" size="small" @change="handelChange"/>
    <GradientColorPicker v-else v-model="computedValue" />
    <el-checkbox v-if="showGradient" v-model="useGradient" class="color-checkbox" @change="useGradientChange">使用渐变色</el-checkbox>
  </div>
</template>

<script>
import GradientColorPicker from './gradientColorPicker';
import { mapState } from 'vuex';

export default {
  components: { GradientColorPicker },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    gradientColor: {
      type: String | Number,
      default: ''
    },
    showGradient: {
      type: Boolean,
      default: false
    },
    isGradient: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    computedValue: {
      get() {
        if (this.useGradient) {
          return this.gradientColor;
        }
        return this.value;
      },
      set(val) {
        if (this.useGradient) {
          this.$emit('update:gradientColor', val);
        } else {
          this.$emit('change', val);
        }
      }
    },
    useGradient: {
      get() {
        return this.isGradient;
      },
      set(val) {
        this.$emit('update:isGradient', val);
      }
    },
    ...mapState({
      'bgColorList': state => state.options.bgColorList
    })
  },
  methods: {
    handelChange(e) {
      this.$emit('change', e);
    },
    useGradientChange(e) {
      if (e && !this.gradientColor) {
        this.$emit('update:gradientColor', this.bgColorList[0].id);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
}
.color-checkbox {
  margin-left:14px;
  &::v-deep {
    .el-checkbox__label {
      padding-left: 4px;
    }
  }
}
</style>
